import { defineComponent, VNode } from 'vue'
import { observer } from '@formily/reactive-vue'
import { usePrefix } from '@pg/prototypes'
import './styles.less'

export interface IHeaderProps {
  extra: VNode | null
  title: VNode | string
}

export const Header = observer(
  defineComponent({
    props: ['title', 'extra'],
    setup(props) {
      const prefix = usePrefix('data-source-setter')
      return () => (
        <div class={`${prefix.value + '-layout-item-header'}`}>
          <div class={`${prefix.value + '-layout-item-title'}`}>{props.title}</div>
          {props.extra}
        </div>
      )
    }
  })
)
